// 定制一系列的任务

// 定制第一个任务 压缩 html 生成到 dist 目录
// 把这个包引入
const gulp = require('gulp'), 
      htmlmin = require('gulp-htmlmin'),
      sass = require('gulp-sass'),
      mincss = require('gulp-clean-css'),
      babel = require('gulp-babel'),
      uglify = require('gulp-uglify'),
      del = require('del'),
      connect = require('gulp-connect'),
      { createProxyMiddleware } = require('http-proxy-middleware')

// gulp-connect 开启服务 

const path = {
    htmlPath:{
        src:'./src/**/*.html',
        dest:'./dist'
    },
    sassPath:{
        src:'./src/sass/*.scss',
        dest:'./dist/css'
    },
    jsPath:{
        src:'./src/js/**/*.js',
        dest:'./dist/js'
    },
    imgPath:{
        src:'./src/images/**/*.*',
        dest:'./dist/images'
    },
    libPath:{
        src:'./src/lib/**/*.*',
        dest:'./dist/lib'
    },
    iconPath:{
        src:'./src/*.ico',
        dest:'./dist'
    }
}

const { htmlPath , sassPath , jsPath , imgPath , libPath , iconPath } = path

// 删除 dist 目录
const deltask = () => del('dist')
const html = () => {
    // 第一个是源文件的路径  gulp.src
    return gulp.src(htmlPath.src)
               .pipe(htmlmin({
                removeComments: true, // 清除HTML注释
                collapseWhitespace: true, // 压缩HTML
                collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
                removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
                minifyJS: true, // 压缩页面JS
                minifyCSS: true // 压缩页面CSS 
              }))
               .pipe(gulp.dest(htmlPath.dest))
               .pipe(connect.reload())  // 刷新浏览器
}
// 定制第二个任务 
// 先把 sass 转为 css 然后再压缩
const css = () => {
    return gulp.src(sassPath.src)
           .pipe(sass())
           .pipe(mincss())
           .pipe(gulp.dest(sassPath.dest))
           .pipe(connect.reload())
}

// 定制第三个任务
// 先把 ES6 转为 ES5 然后再压缩
const js = () => {
    return gulp.src(jsPath.src)
            .pipe(babel({
                presets: ['@babel/env']
              }))
            .pipe(uglify())
            .pipe(gulp.dest(jsPath.dest))
            .pipe(connect.reload())
}

// 需要把这两个 images lib  文件夹  icon 图标直接复制到 dist 目录
const images = () => {
    return gulp.src(imgPath.src)
           .pipe(gulp.dest(imgPath.dest))
}
const lib = () => {
    return gulp.src(libPath.src)
           .pipe(gulp.dest(libPath.dest))
}
const ico = () => {
    return gulp.src(iconPath.src)
           .pipe(gulp.dest(iconPath.dest))
}
// 定制一个 监控任务 如果有东西发生改变 再次执行任务
const watch = () => {
    gulp.watch(htmlPath.src,html)
    gulp.watch(sassPath.src,css)
    gulp.watch(jsPath.src,js)
}

// 开启一个服务
const server = () => {
    connect.server({
        livereload:true,
        port:1234,
        root:'dist',
        middleware(){
            return [
                createProxyMiddleware('/rap2',{
                    target:'http://rap2api.taobao.org',
                    changeOrigin:true,
                    pathRewrite:{
                        '^/rap2':''
                    }
                }),
                // 解决跨域问题
                createProxyMiddleware('/xmyx',{
                    target:'http://www.xiongmaoyouxuan.com',
                    changeOrigin:true,
                    pathRewrite:{
                        '^/xmyx':''
                    }
                })
            ]
        }
    })
}

// 执行多个任务
// series  同步执行任务 先把前面的执行完在执行后面的
// parallel  异步执行任务  多个任务同时执行
// 先删除然后再执行其他任务 
module.exports.default = gulp.series(deltask,gulp.parallel(server,watch,html,css,js,images,lib,ico))